<!--基组件-->
<template>
	<view class="layui" :style="isLayuiStyle">
		<view class="layuiHead" v-if="headShow">
			<HeadBar @LeftHeadClick="LeftHeadClick" :customCallBackHead="customCallBackHead" :isFixedHead="isFixedHead" :HeadBarData="headDatas">
				<template #customHead>
					<slot name="customHead"></slot>
				</template>
			</HeadBar>
		</view>
		<view :style="!heightIsAuto?returnHeight:{height:`auto`}" class="startBox" style="margin-top: -1px;">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"Layui",
		props:{
		 headShow:{//是否开启headBar
			 type:Boolean,
			 default:false,
		 },
		 HeadBarData:{//headBar配置
			 type:Object,
			 default(){
			   return {
			 	  height:0
			   }
			 }
		 },
		isFixedHead:{//是否固定头部
			type:Boolean,
			default:true
		},
		background:{//背景颜色
			type:String,
			default:'#ffffff'
		},
		heightIsAuto:{//高度是否自适应
			type:Boolean,
			default:false
		},
		customCallBackHead:{//是否开启自定义左侧点击事件
			type:Boolean,
			default:false,
		}
		},
		watch:{
			HeadBarData(newVal){
				this.headDatas=newVal;
			}
		},
		data() {
			return {
				statusBarHeight:null,
				headDatas:this.HeadBarData
			};
		},
		computed:{
			isLayuiStyle(){
				let str = ""
				if(this.isFixedHead){
					str = `margin-top:calc(44px + ${this.statusBarHeight}px);background:${this.background}`
				}else{
					str = `background:${this.background}`
				}
				return str
			},
			returnHeight(){
				if(this.headShow){
					return `height:calc(100vh - ${this.statusBarHeight}px - 44px)`
				}else{
					return `height:calc(100vh - ${this.statusBarHeight}px)`
				}
			}
		},
		methods:{
			LeftHeadClick(){
				this.$emit("LeftHeadClick")
			}
		},
		created() {
		  const info = uni.getSystemInfoSync()
		  this.statusBarHeight = info.statusBarHeight
		}
	}
</script>

<style scoped>
.layui{
	display: flex;
	flex-direction: column;
}
.startBox{
	display: flex;
	flex-direction: column;
}
</style>